<template>
    <div>
        <tab title="分类"></tab>
        <van-row>
            <van-col span="6">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="v.cat_name" v-for="(v, i) in list" :key="i" />
                </van-sidebar>
            </van-col>


            <van-col span="18">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <div v-for="(v, i) in list[active]?.children" :key="i">
                        <div>
                            {{ v.cat_name }}
                            <van-grid :border="false" :column-num="3">
                                <van-grid-item v-for="(v, i) in v.children" :key="i"  @click="todetail(v.cat_name)">
                                    <van-image
                                        :src="v.cat_icon ? v.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                                    {{ v.cat_name }}
                                </van-grid-item>
                            </van-grid>
                        </div>
                    </div>
                </van-pull-refresh>
            </van-col>

        </van-row>
        <div style="height: 5rem;"></div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
import tab from '@/components/tab.vue';
import { categoriesApi } from '@/api/api';
import { ref } from 'vue';
import { showToast } from 'vant';

let list = ref([])
const getList = () => {
    categoriesApi().then((res) => {
        console.log(res);
        list.value = res.data.message
    })
}
getList()

const active = ref(0);

const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        getList()
    }, 1000);
};

const todetail = (name) => {
    router.push({ path: '/search', query: { name: name } })
}
</script>

<style lang="scss" scoped></style>